<template>
	<view class="zone">
		<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>

		<view class="main">
			<view class="widtit">
				<image src="http://img.cpgm.cc/panda/static/home/widthtitle.png" mode="widthFix" />
				<p>所有玩法不收任何费用，任何让你交钱的都是骗子</p>
				<p>每日18:00之前自动结算当天提现</p>
			</view>
			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>
			<view class="box">

				<view class="flexbw">
					<text>平台账号</text>
					<text>提现账号</text>
					<text>金额</text>
					<text>状态/时间</text>
				</view>

				<scroll-view scroll-y class="scrollbox" @scrolltolower="scrolltolower">
					<view class="lsit">
						<view class="item" v-for="(item , index) in list[stat]" :key="index">
							<text class="acount">{{item.mobile}}</text>
							<view class="two">
								<text>{{item.alipay_name}}</text>
								<text>{{item.alipay_account}}</text>
							</view>
							<text class="mi" :class="[getcolor(item.money)]">{{item.money}}大米</text>
							<view class="last">
								<text :class="[item.is_pay==2?'success':'awite']">{{item.is_pay==2?'已到账':'等待打款'}}</text>
								<text class="time">{{item.created_at}}</text>
							</view>
						</view>
						<view class="empty2" v-if="list[stat] == ''">
							<image src="http://img.qxgm.site/sjcs/static/public/empty.png" mode="widthFix" />
							<text>数据为空</text>
						</view>
						<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
					</view>
				</scroll-view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [
					{
						id: 1,
						name: '提现成功',
						isrequest:true,
					},
					{
						id: 2,
						name: '等待打款',
						isrequest:false,
					},
					{
						id: 3,
						name: '即时提现',
						isrequest:false,
					}
				],
				stat:1,
				background: {
					backgroundColor: 'transparent',
				},
				list:{
					1:[],
					2:[],
					3:[],
					4:[],
				},
				page:[1,1,1,1,1],
				max_page:[1,1,1,1,1],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
			};
		},
		onLoad(){
			this.cashDetailList(1)
		},
		onReachBottom() {
			
		},
		methods: {

			getcolor(num){
				let nums = Number(num)	

				switch (nums) {
					case 20 :
						return 'color1'
						break;
					case 50 :
						return 'color2'
						break;
					case 100 :
						return 'color3'
						break;
					case 500 :
						return 'color4'
						break;	

					default:
						return 'colordf'
						break;
				}
			},
			// 下拉加载
			scrolltolower(){
				if (this.page[this.stat] >= this.max_page[this.stat]){
					this.status = 'nomore' 
					return;
				} 
				this.status = 'loading';
				this.page[this.stat] = ++this.page[this.stat];
				this.cashDetailList(this.stat)
				setTimeout(() => {
					if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[this.stat]) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			},
			// 我的背包切换
			tabchange(id) {
				this.stat = id
				if(!this.tablist[id-1].isrequest) {
					this.cashDetailList(id)
				}
			},
			// 获取提现列表
			async cashDetailList(is_pay){
				let res = await this.$http.index.cashDetailList({
					type:is_pay,
					page:this.page[is_pay]
				})
				if(res.code == 1) {
					this.max_page[is_pay] = res.page
					this.list[is_pay] = [...this.list[is_pay] , ...res.data];
					this.tablist[is_pay-1].isrequest = true
					if (this.page[is_pay] > this.max_page[is_pay] || this.page[is_pay] == this.max_page[is_pay]) this.status = 'nomore';
				}
			},
		}
	}



</script>


<style lang="less">
.zone {
	background: linear-gradient(180deg, #E71E0F 0%, #FEBC78 100%);
	min-height: 100vh;
}

.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		width: 100%;
		display: flex;
		align-items: flex-end;
		text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-left: 5px;
			margin-bottom: 10px;
		}
		image {
				width: 65%;
				margin-left: 5px;
			}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

	.back {
		position: fixed;
		top: 20px;
		left: 10px;
	}

.main {
	padding: 10px;
}

.widtit {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding: 10px;

	p {
		color: #fff;
		font-size: 14px;
	}

	image {
		width: 60%;
	}
}


	// tab导航
	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		background: #E9E9E9 linear-gradient(180deg, #FFE6E0 0%, #FFFFFF 100%);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		padding: 5px;
		overflow: hidden;
		margin: 10px auto;
		border-radius: 7px;
		// backdrop-filter: blur(50px);

		view {
			width: 50%;
			height: 42px;
			text-align: center;
			line-height: 42px;
			color: rgba(52, 52, 52, 0.61);
			font-size: 13px;
			font-weight: 600;
			border-radius: 7px;
		}
	}
	.active {
		color: #FFFFFF !important;
		background: #E82916 !important;
	}

.box {
	background: #E9E9E9 linear-gradient(180deg, #FFE6E0 0%, #FFFFFF 100%);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    padding: 10px;
	border-radius: 10px;
}

.scrollbox {
	height: calc(100vh - 304px);
	box-sizing: border-box;
}

.item {
	background: #fff;
	border-radius: 5px;
	padding: 12px 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;

	.acount {
		color: #000;
		font-size: 12px;
		font-weight: 600;
	}
	.two {
		display: flex;
		flex-direction: column;
		font-size: 12px;
		color: #000;
		font-weight: 600;

		text:nth-child(2){
			width: 80px;
			white-space: nowrap;/*不允许换行*/
			overflow: hidden;/*超出隐藏*/
			text-overflow: ellipsis;/*文本超出三点代替*/
		}
	}
	
	.mi {
		color: #FE431A;
		font-size: 12px;
		font-weight: 600;
	}

	.last {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-size: 12px;
		font-weight: 600;
		
		.time {
			color: rgba(0, 0, 0, 0.8);
			zoom: 0.8;
			margin-top: 5px;
		}
	}
}

.success {
	color: #239D4C !important;
}
.awite {
	color: #FE525B !important;
}
.fail {
	color: #FE431A !important;
}



.flexbw {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 10px;
	padding: 0 12px;
}

.empty2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	image {
		width: 40%;
	}
	text {
		color: #000;
	}
}

.color1 {
	color: #0ACFAD !important;
}

.color2 {
	color: #1A9DFE !important;
}

.color3 {
	color: #FE431A !important;
}

.color4 {
	color: #E21AFE !important;
}



</style>
